<template>
    <div v-cloak class="aui-wrapper aui-page__iframe">
        <div class="aui-content__wrapper">
            <div class="aui-content">
                <el-card shadow="never" class="aui-card--fill">
                    <div class="mod-sys__menu">
                        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                            <el-form-item>
                                <el-button size="small"  type="primary" @click="addOrUpdateHandle()">新增</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;">
                            <el-table-column prop="name" label="名称" header-align="center" min-width="150"></el-table-column>
                            <el-table-column prop="icon" label="图标" header-align="center" align="center">
                                <template  #default="scope">
                                    <svg class="icon-svg" aria-hidden="true"><use :xlink:href="'#' + scope.row.icon"></use></svg>
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="类型" header-align="center" align="center">
                                <template #default="scope">
                                    <el-tag v-if="scope.row.type === 0" size="small">菜单</el-tag>
                                    <el-tag v-else size="small" type="info">按钮</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="sort" label="sort" header-align="center" align="center"></el-table-column>
                            <el-table-column prop="url" label="路由" header-align="center" align="center" width="150" :show-overflow-tooltip="true" ></el-table-column>
                            <el-table-column prop="component" label="组件" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="permissions" label="授权标识" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
                           <el-table-column  label="操作" fixed="right" header-align="center" align="center" width="150">
                               <template #default="scope">
                                   <el-button  type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                                   <el-button  v-if="hasPermission('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
                               </template>
                           </el-table-column>
                        </el-table>
                        <!-- 弹窗, 新增 / 修改 -->
                        <MenuAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList"></MenuAddOrUpdate>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    import DataList from "../../utils/DataList";
    import {ref , reactive, onMounted ,nextTick} from 'vue' ;
    import MenuAddOrUpdate from "@/components/sys/MenuAddOrUpdate";
	import {hasPermission} from "@/utils/hasPermission"
    export default {
        name: "Menu" ,

        components:{
            MenuAddOrUpdate
        } ,

        setup(){
            const {dataForm,
                mixinViewModuleOptions,
                getDataList,
                dataList,
                total,
                page,
                limit,
                dataListLoading,
                dataListSelectionChangeHandle,
                dataListSortChangeHandle,
                pageSizeChangeHandle,
                pageCurrentChangeHandle,
                addOrUpdateHandle,
                deleteHandle,
                exportHandle,
                addOrUpdateVisible,
                dataListSelections,
                addOrUpdate}  = DataList();

            onMounted(()=>{
                mixinViewModuleOptions.value.getDataListURL = '/sys/menu/list' ;
                mixinViewModuleOptions.value.deleteURL = '/sys/menu' ;

                if (mixinViewModuleOptions.value.activatedIsNeed) {
                    getDataList();
                }

            })

            return {
                dataForm,
                mixinViewModuleOptions,
                getDataList,
                dataList,
                total,
                page,
                limit,
                dataListLoading,
                dataListSelectionChangeHandle,
                dataListSortChangeHandle,
                pageSizeChangeHandle,
                pageCurrentChangeHandle,
                addOrUpdateHandle,
                deleteHandle,
                exportHandle,
                addOrUpdateVisible,
                dataListSelections,
                addOrUpdate
            }
        },
		methods:{
			hasPermission
		}


    }

        /*data: function () {
            return {
                dataForm: {},
                dataList: [],               // 数据列表
                order: '',                  // 排序，asc／desc
                orderField: '',             // 排序，字段
                page: 1,                    // 当前页码
                limit: 10,                  // 每页数
                total: 0,                   // 总条数
                dataListLoading: false,     // 数据列表，loading状态
                dataListSelections: [],     // 数据列表，多选项
                addOrUpdateVisible: false,
                mixinViewModuleOptions: {
                    getDataListURL: '/sys/menu/list',
                    deleteURL: '/sys/menu',
                    activatedIsNeed: true,    // 此页面是否在激活（进入）时，调用查询数据列表接口？
                    getDataListIsPage: false, // 数据列表接口，是否需要分页？
                    deleteIsBatch: false,     // 删除接口，是否需要批量？
                    deleteIsBatchKey: 'id',   // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
                    exportURL: ''             // 导出接口，API地址
                }
            }
        },
        components: {
            FnAddOrUpdateComponent
        },
        created: function () {
            if (this.mixinViewModuleOptions.activatedIsNeed) {
                this.getDataList();
            }
        },

        methods: {
            // 获取数据列表
            getDataList: function () {
                let self = this;
                self.dataListLoading = true;
                self.$http.get(
                    self.mixinViewModuleOptions.getDataListURL,
                    {
                        params: _.merge({
                            order: self.order,
                            orderField: self.orderField,
                            page: self.mixinViewModuleOptions.getDataListIsPage ? self.page : null,
                            limit: self.mixinViewModuleOptions.getDataListIsPage ? self.limit : null
                        }, self.dataForm)
                    }
                ).then(function (res) {
                    self.dataListLoading = false;
                    if (res.data.code !== 0) {
                        self.dataList = [];
                        self.total = 0;
                        return self.$message.error(res.data.msg);
                    }

                    self.dataList = self.mixinViewModuleOptions.getDataListIsPage ? res.data.data.list : res.data.data;

                    if (res.data.data.param) {
                        self.dataForm = res.data.data.param;
                    }
                    self.total = self.mixinViewModuleOptions.getDataListIsPage ? res.data.data.total : 0;
                }).catch(function () {
                    self.dataListLoading = false;
                })
            }
            , addOrUpdateHandle: function (id) {
                let self = this;
                self.addOrUpdateVisible = true;
                self.$nextTick(function () {
                    self.$refs.addOrUpdate.dataForm.id = id;
                    self.$refs.addOrUpdate.init();
                })
            }, deleteHandle: function (id) {
                let self = this;
                if (self.mixinViewModuleOptions.deleteIsBatch && !id && self.dataListSelections.length <= 0) {
                    return self.$message({
                        message: '请选择删除项',
                        type: 'warning',
                        duration: 1000
                    });
                }
                self.$confirm('确定进行[{handle}]操作?', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    self.$http.delete(
                        self.mixinViewModuleOptions.deleteURL + (self.mixinViewModuleOptions.deleteIsBatch ? '' : '/' + id),
                        self.mixinViewModuleOptions.deleteIsBatch ? {
                            'data': id ? [id] : self.dataListSelections.map(function (item) {
                                return item[self.mixinViewModuleOptions.deleteIsBatchKey];
                            })
                        } : {}
                    ).then(function (res) {
                        if (res.data.code !== 0) {
                            return self.$message.error(res.data.msg);
                        }
                        self.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 500,
                            onClose: function () {
                                self.getDataList();
                            }
                        });
                    }).catch(function () {
                    });
                }).catch(function () {
                });
            },


        }*/

</script>

<style scoped>

</style>
